<template>
    <swiper :options="swiperOption" class="newgame">
        <swiper-slide class="swiper-slide swiper-serve" v-for="(item,index) in data" :key="index">
            <router-link tag="li" :to="`/detail/${item.game_id}`" class="f-pr">
                <i class="newgame-tag f-pa">{{item.min_rate|zero}}折起</i>
                <img :src="item.imgurl" class="bg"/>
                <div class="f-pa newgame-text">
                    <p class="f-fs16">{{item.name}}</p>
                    <span class="newgame-label f-ib" v-for="(idxs,ind) in item.label" :key="ind">{{idxs.name}}</span>
                </div>
            </router-link>
        </swiper-slide>
    </swiper>
</template>

<script>
export default {
    name: 'newgame',
    props:['data'],
    data () {
        return {
            swiperOption: {
                autoplay: {
                    disableOnInteraction: false,
                },
                spaceBetween:20,/**/
                slidesPerView : 2
            }
        }
    },

    methods: {},

    created (){}
}
</script>

<style lang="less" scoped>
.newgame,.newgame img{
    height: 380px;
}
.newgame img,.newgame-text{
    width:335px;
}
.newgame-tag{
    background-color:#ffa72b;
    color:#fff;
    top:10px;
    left:10px;
    padding:5px 10px; 
    border-radius: 8px;
}
.newgame-text{
    bottom:0;
    padding-left: 20px;
    color:#fff;
    p{
        margin-bottom: 10px;
    }
    span{
        padding:5px 10px;
        margin:0 5px 15px 0;
        background: rgba(0,0,0,.7)
    }
}
.swiper-pagination{
    bottom: 0!important;
}
</style>
